<!DOCTYPE html>
<style>
  body {
    width: 800px;
    height: 800px;
    overflow-y: hidden;
  }

  #text-wrapper {
    padding: 20px;
    overflow-y: scroll;
    background-color:#ccc;
    height: 40px;
    width: 100px;
  }
</style>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script type="text/javascript">
  var scrollTopBefore;
  var maxScrollLeft;

  const testCase = async_test(
    "If an autoscroll starts from within a " +
    "scrollable div, it does not propagate to its non-scrollable document " +
    "body. Furthermore, it tests that if the body has only one of overflowX " +
    "or overflowY set to hidden, the scrollable axis actually scrolls. Note " +
    "that this test is pertaining to crbug.com/531525.");

  const finishTest = testCase.step_func_done(() => {
    eventSender.mouseUp();
    // Because only overflowY:hidden is set, horizontal scroll should happen and
    // vertical scroll shouldn't.
    assert_equals(document.scrollingElement.scrollTop, scrollTopBefore);
    assert_equals(document.scrollingElement.scrollLeft, maxScrollLeft);
    document.getElementById('text-wrapper').style.display = 'none';
  });

  window.onload = function () {
    scrollTopBefore = document.scrollingElement.scrollTop;
    maxScrollLeft = document.scrollingElement.scrollWidth - window.innerWidth;

    var element = document.getElementById('select');
    var x = element.offsetLeft + 7;
    var y = element.offsetTop + 7;
    eventSender.dragMode = false;
    eventSender.mouseMoveTo(x, y);
    eventSender.mouseDown();
    eventSender.mouseMoveTo(x + 795, y);
    eventSender.mouseMoveTo(x + 795, y + 795);
    window.requestAnimationFrame(finishTest);
  }
</script>

<div id="text-wrapper">
  <span id="select">This text could be anything but should be long enough to be scrollable.</span>
</div>
